<template>
  <div class="sealbig" :style="` border: 1px solid ${color};`" v-if="status!=null">
    <div class="sealsmall" :style="`border: 1px solid ${color};`">
      <div class="block" :style="`border-top: 1px solid ${color};border-bottom: 1px solid ${color};color: ${color};`">
        <div class="icon">★</div>
        <span v-if="status == '0'"> 待审核 </span>
        <span v-if="status == '1'"> 已审核 </span>
        <span v-if="status == '2'"> 被作废 </span>
        <div class="icon">★</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'seal',

  data () {
    return {
      color: '',
    }
  },
  methods:{
    createColor(){
      console.log(this.status,"颜色")
      if (this.status === '0') {
        this.color = '#D7D7D7'
      }
      if (this.status === '1') {
        this.color = '#52c41a'
      }
      if (this.status === '2') {
        this.color = 'red'
      }
    }
  },
  watch: {
    status (newvalue, oldvalue) {
      if (newvalue === '0') {
        this.color = '#D7D7D7'
      }
      if (newvalue === '1') {
        this.color = '#52c41a'
      }
      if (newvalue === '2') {
        this.color = 'red'
      }
    }
  },
  props: {
    status: {
      type: String,
      default: '0'
    }
  },
}
</script>

<style scoped>
.sealbig{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #D7D7D7;
  justify-content: center;
  transform: rotate(30deg);
}
.sealsmall{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border-left: transparent;
  border-right: transparent;
  border: 1px solid #D7D7D7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.block{
  width: 120px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  position: relative;
  font-size: 25px;
}

.icon:nth-child(1){
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translate(-50%,-50%);
}

.icon:nth-child(3){
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  z-index: 2;
  left: 50%;
  bootom: 0%;
  transform: translate(-50%,-50%);
}
</style>